<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/common/common.css" />
		<link rel="stylesheet" href="../../css/settings/seeclass.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">2年3班排名</h1>
			<span class="mui-pull-right manage">管理</span>
		</header>
		<div class="mui-content">
			<div class="nav">
				<div class="ranking">排名</div>
				<div class="name">姓名</div>
				<div class="ability">签到次数</div>
				<div class="fraction"><img src="../../imges/Path 628.png" /></div>
				<div class="operation"></div>
			</div>
			<div class="main">
				<div class="news join">
					<div class="ranking">
						<div class="weizhi">-</div>
						<div class="choice"></div>
					</div>
					<div class="name">
						<div class="head"><img src="../../imges/head (1).png" /></div>
						<div class="data">
							<div class="fullname weizhi">莱昂纳多</div>
						</div>
					</div>
					<div class="ability">
						<div class="weizhi">-</div>
						<div class="choice"></div>
					</div>
					<div class="fraction">
						<div class="weizhi">-</div>
					</div>
					<div class="operation agree"><button type="button" class="mui-btn mui-btn-success">批准加入</button></div>
				</div>

				<div class="news rank">
					<div class="ranking">
						<div class="sequence">1</div>
						<div class="choice"></div>
					</div>
					<div class="name">
						<div class="head"><img src="../../imges/head (2).png" /></div>
						<div class="data">
							<div class="fullname">德普</div>
							<div class="type">外星人</div>
						</div>
					</div>
					<div class="ability">
						<div class="cishu">53</div>
					</div>
					<div class="fraction">
						<div>31</div>
					</div>
					<div class="operation agree"></div>
				</div>

				<div class="news rank">
					<div class="ranking">
						<div class="sequence">2</div>
						<div class="choice"></div>
					</div>
					<div class="name">
						<div class="head"><img src="../../imges/head (3).png" /></div>
						<div class="data">
							<div class="fullname">罗伯特</div>
							<div class="type">外星人</div>
						</div>
					</div>
					<div class="ability">
						<div class="cishu">32</div>
					</div>
					<div class="fraction">
						<div>31</div>
					</div>
					<div class="operation agree"></div>
				</div>

				<div class="news rank">
					<div class="ranking">
						<div class="sequence">3</div>
						<div class="choice"></div>
					</div>
					<div class="name">
						<div class="head"><img src="../../imges/head (4).png" /></div>
						<div class="data">
							<div class="fullname">克鲁尼</div>
							<div class="type">外星人</div>
						</div>
					</div>
					<div class="ability">
						<div class="cishu">31</div>
					</div>
					<div class="fraction">
						<div>30</div>
					</div>
					<div class="operation agree"></div>
				</div>

				<div class="news rank">
					<div class="ranking">
					<div class="sequence">4</div>
						<div class="choice"></div>
						<!--<img src="../../imges/j3.png" />-->
					</div>
					<div class="name">
						<div class="head"><img src="../../imges/head (5).png" /></div>
						<div class="data">
							<div class="fullname">唐尼</div>
							<div class="type">外星人</div>
						</div>
					</div>
					<div class="ability">
						<div class="cishu">20</div>
					</div>
					<div class="fraction">
						<div>29</div>
					</div>
					<div class="operation agree"></div>
				</div>

				<div class="news rank">
					<div class="ranking">
						<div class="sequence">5</div>
						<div class="choice"></div>
						<!--<img src="../../imges/j3.png" />-->
					</div>
					<div class="name">
						<div class="head"><img src="../../imges/head (6).png" /></div>
						<div class="data">
							<div class="fullname">布拉德</div>
							<div class="type">外星人</div>
						</div>
					</div>
					<div class="ability">
						<div class="cishu">19</div>
					</div>
					<div class="fraction">
						<div>29</div>
					</div>
					<div class="operation agree"></div>
				</div>

				<div class="news rank">
					<div class="ranking">
						<div class="sequence">6</div>
						<div class="choice"></div>
						<!--<img src="../../imges/j3.png" />-->
					</div>
					<div class="name">
						<div class="head"><img src="../../imges/head (6).png" /></div>
						<div class="data">
							<div class="fullname">史密斯</div>
							<div class="type">外星人</div>
						</div>
					</div>
					<div class="ability">
						<div class="cishu">14</div>
					</div>
					<div class="fraction">
						<div>28</div>
					</div>
					<div class="operation agree"></div>
				</div>
				<div class="news rank">
					<div class="ranking">
						<div class="sequence">7</div>
						<div class="choice"></div>
						<!--<img src="../../imges/j3.png" />-->
					</div>
					<div class="name">
						<div class="head"><img src="../../imges/head (8).png" /></div>
						<div class="data">
							<div class="fullname">史密斯</div>
							<div class="type">外星人</div>
						</div>
					</div>
					<div class="ability">
						<div class="cishu">14</div>
					</div>
					<div class="fraction">
						<div>28</div>
					</div>
					<div class="operation agree"></div>
				</div>
			</div>
		</div>
		<button type="button" class="mui-btn mui-btn-danger remove_bottom"><div class="num">0</div>删除</button>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script type="text/javascript">
			mui.init()
			$(".manage").on("tap", function() {
				if($(".ranking").find("div").css("display") == "block") {
					$(this).text("完成")
					$(".ranking").find("div").css("display", "none")
					$(".choice").css("display", "block")
					$(".remove_bottom").css("display", "block")
					$(".main").css("margin-bottom","48px")
				} else {
					$(this).text("管理")
					$(".ranking").find("div").css("display", "block")
					$(".choice").css("display", "none")
					$(".remove_bottom").css("display", "none")
					$(".main").css("margin-bottom","0px")
				}
				for(var i=0;i<$(".sequence").length;i++){
					$(".sequence").eq(i).text(i+1)
				}
			})
			$(".ranking").on("tap", function() {
				if($(this).find(".choice").hasClass("back")) {
					$(this).find(".choice").removeClass("back")
					$(this).find(".choice").css("border-color", "#ccc")
				} else {
					$(this).find(".choice").addClass("back")
					$(this).find(".choice").css("border-color", "#FF4B4B")
				}
				selectednum()
			})
			$(".remove_bottom").on("tap",function(){
				$(".back").parents(".news").remove()
				selectednum()
			})
			
			//选中数量统计
			function selectednum(){
					if($(".back").length==0){
					$(".num").css("display","none")
				}else{
					$(".num").css("display","block")
					$(".num").text($(".back").length)
				}
			}
		</script>
	</body>

</html>